<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Deliver-Services</title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link rel="shortcut icon" href="img/Logo-i.png" />
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="vendor/bootstrap-3.3.0/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" href="vendor/fakeLoader.css" />
		<link rel="stylesheet" href="vendor/animsition.min.css" />
		<link rel="stylesheet" type="text/css" href="vendor/animate.css" />
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="vendor/fakeLoader.min.js"></script>
		<link href="css/core.css" rel="stylesheet" />
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
        <![endif]-->
	</head>

	<body class="animsition">
		<!--IE9一下浏览器提示-->
		<!--[if lt IE 9]>
			<div class="Del-warning" id="DelWarning">
				<div class="warning-center">
					<span class="tips">为了您更好的体验，请使用IE 9及以上的浏览器！</span>
					<span class="close"><i class="fa fa-times"></i></span>
				</div>
			</div>
		<![endif]-->

		<!--公共header-->
		<div class="fakeloader"></div>
		<script>
			$(".fakeloader").fakeLoader({
				timeToHide: 500, //Time in milliseconds for fakeLoader disappear
				zIndex: 99999, // Default zIndex
				spinner: "spinner2", //Options: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 
				bgColor: "#caffbe", //Hex, RGB or RGBA colors
				//				imagePath: "yourPath/customizedImage.gif" //If you want can you insert your custom image
			});
		</script>
		<header class="Del-common-header">
			<div class="content">
				<div class="common-header-top">
					<div class="top-logo-img">
						<img src="img/logo1.png" />
					</div>
					<ul class="top-list clearfix">
						<li class="list-item list-rss">
							<a href=""><i class="fa fa-rss"></i></a>
						</li>
						<li class="list-item list-f">
							<a href=""><i class="fa fa-facebook-f"></i></a>
						</li>
						<li class="list-item list-twitter">
							<a href=""><i class="fa fa-twitter"></i></a>
						</li>
					</ul>
				</div>
				<div class="common-header-nav wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
					<ul id="nav-menu" class="nav-menu clearfix">
						<li class="nav-toggle">
							<div id="toggle-icon" class="toggle-icon">
								<i class="fa fa-bars"></i>
								<i class="fa fa-times" style="display: none;"></i>
							</div>
						</li>
						<li class="signin-toggle">
							<a data-sign="0" id="signin-icon" class="user-signin"><i class="fa fa-user"></i></a>
						</li>
						<li class="home-logo">
							<a href="index-Home.html"><span class="text-replace">DELIVER</span></a>
						</li>
					</ul>
					<ul class="nav-list clearfix">
						<li class="list-item">
							<a href="index-Home.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="500">HOME</a>
						</li>
						<li class="list-item">
							<a href="portfolio.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="500">PORTFOLIO</a>
						</li>
						<li class="list-item">
							<a href="about.html" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="500">ABOUT</a>
						</li>
						<li class="list-item">
							<a href="" class="nav-active" class="animsition-link" data-animsition-out="fade-out-down-sm" data-animsition-out-duration="500">SERVICES</a>
						</li>
						<li class="list-item">
							<a href="archive.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">ARCHIVE</a>
						</li>
						<li class="list-item">
							<a href="index-blog.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">BLOG</a>
						</li>
						<li class="list-item">
							<a href="other-pages.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">OTHER PAGES</a>
						</li>
						<li class="list-item">
							<a href="contact-us.html" class="animsition-link" data-animsition-out="fade-out-left" data-animsition-out-duration="500">CONTACT US</a>
						</li>
						<li class="list-item header-search">
							<form method="get" target="_blank" id="searchform" name="searchform" action="http://www.baidu.com/s">
								<div class="search-input-wrapper">
									<span class="search-icon"><i class="fa fa-search"></i></span>
									<input type="hidden" name="genre" value="">
									<input type="search" class="search-input" id="search-input" name="word" value="" placeholder="输入关键词搜索..." autocomplete="off">
									<button type="submit" class="search-submit" id="search-submit"></button>
								</div>
							</form>
						</li>
					</ul>
				</div>
			</div>
			<div class="common-header-footer">
				<div class="header-footer-text">
					<p class="text">SERVICES</p>
				</div>
			</div>
		</header>

		<section class="Del-Services-container">
			<div class="About-us-explain wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
				<h3>CHECK OUT OUR AWESOME SERVICES</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae<br/> metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</p>
			</div>
			<div class="reasons clearfix  wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
				<ul class="">
					<li class="clearfix">
						<div class="reasonsli">
							<div class="reasons-left"><img src="img/services-title-img1.png" /></div>
							<div class="reasons-right">
								<h4><a href="#">SERVICE TITLE 1</a></h4>
								<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lato justo ligula, interdum ut lobortis</span>
							</div>
						</div>
					</li>
					<li class="li-right clearfix">
						<div class="reasonsli">
							<div class="reasons-left"><img src="img/services-title-img2.png" /></div>
							<div class="reasons-right">
								<h4><a href="#">SERVICE TITLE 2</a></h4>
								<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lato justo ligula, interdum ut lobortis</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<div class="reasonsli">
							<div class="reasons-left"><img src="img/services-title-img3.png" /></div>
							<div class="reasons-right">
								<h4><a href="#">SERVICE TITLE 3</a></h4>
								<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lato justo ligula, interdum ut lobortis</span>
							</div>
						</div>
					</li>
					<li class="li-right clearfix">
						<div class="reasonsli">
							<div class="reasons-left"><img src="img/services-title-img4.png" /></div>
							<div class="reasons-right">
								<h4><a href="#">SERVICE TITLE 4</a></h4>
								<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lato justo ligula, interdum ut lobortis</span>
							</div>
						</div>
					</li>
					<li class="clearfix">
						<div class="reasonsli">
							<div class="reasons-left"><img src="img/services-title-img5.png" /></div>
							<div class="reasons-right">
								<h4><a href="#">SERVICE TITLE 5</a></h4>
								<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lato justo ligula, interdum ut lobortis</span>
							</div>
						</div>
					</li>
					<li class="li-right clearfix">
						<div class="reasonsli">
							<div class="reasons-left"><img src="img/services-title-img6.png" /></div>
							<div class="reasons-right">
								<h4><a href="#">SERVICE TITLE 6</a></h4>
								<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lato justo ligula, interdum ut lobortis</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="pricing  wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.1s">
				<div class="intro">
					<h4><a href="#">SERVICE TITLE 3</a></h4>
					<span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</span>
				</div>
				<div class="packages">
					<ul class="sepul clearfix">
						<li class="sepli">
							<div class="sep">
								<ul>
									<li class="sep-frist">
										<h4>BASIC</h4></li>
									<li class="sep-second">$999<span>99</span></li>
									<li>Custom Design</li>
									<li>3 or Less Pages</li>
									<li>Basic SEO</li>
									<li>Contact Form</li>
									<li>Updates Allowed</li>
									<li class="last">
										<div class="explain-button">
											<a href="#"><input type="button" value="PURCHASE" /></a>
										</div>
									</li>
								</ul>
							</div>
						</li>
						<li class="sepli sepitem">
							<div class="sep">
								<ul>
									<li class="sep-frist">
										<h4>STANDARD</h4></li>
									<li class="sep-second">$1799<span>99</span></li>
									<li>Custom Design</li>
									<li>3 or Less Pages</li>
									<li>Basic SEO</li>
									<li>Contact Form</li>
									<li>Updates Allowed</li>
									<li class="last">
										<div class="explain-button">
											<a href="#"><input type="button" value="PURCHASE" /></a>
										</div>
									</li>
								</ul>
							</div>
						</li>
						<li class="sepli sepitem">
							<div class="sep">
								<ul>
									<li class="sep-frist">
										<h4>PREMIUM</h4></li>
									<li class="sep-second">$3499<span>99</span></li>
									<li>Custom Design</li>
									<li>3 or Less Pages</li>
									<li>Basic SEO</li>
									<li>Contact Form</li>
									<li>Updates Allowed</li>
									<li class="last">
										<div class="explain-button">
											<a href="#"><input type="button" value="PURCHASE" /></a>
										</div>
									</li>
								</ul>
							</div>
						</li>
						<li class="sepli sepitem">
							<div class="sep">
								<ul>
									<li class="sep-frist">
										<h4>CUSTOM</h4></li>
									<li class="sep-second">$?<span></span></li>
									<li>Custom Design</li>
									<li>3 or Less Pages</li>
									<li>Basic SEO</li>
									<li>Contact Form</li>
									<li>Updates Allowed</li>
									<li class="last">
										<div class="explain-button">
											<a href="#"><input type="button" value="PURCHASE" /></a>
										</div>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="About-us-work  wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.1s">
				<ul class="work-explain clearfix">
					<li class="explain-item explain-left">
						<div id="">
							<h4>GOOD TO KNOW</h4><span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales purus vel nunc elementum rhoncus. Praesent neque metus, mollis sit amet convallis ut, tempus porta arcu. Phasellus accumsan facilisis viverra. Sed a velit sit amet nunc aliquam consectetur.</span>
						</div>
					</li>
					<li class="explain-item">
						<div class="">
							<h4>COOL FEATURE</h4><span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales purus vel nunc elementum rhoncus. Praesent neque metus, mollis sit amet convallis ut, tempus porta arcu. Phasellus accumsan facilisis viverra. Sed a velit sit amet nunc aliquam consectetur.</span>
						</div>
					</li>
					<li class="explain-item">
						<div class="">
							<h4>SOMETHING ELSE TO KNOW</h4><span class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales purus vel nunc elementum rhoncus. Praesent neque metus, mollis sit amet convallis ut, tempus porta arcu. Phasellus accumsan facilisis viverra. Sed a velit sit amet nunc aliquam consectetur.</span>
						</div>
					</li>
				</ul>
			</div>
			<div class="About-us-needyou  wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.1s">
				<div class="needyou-explain">
					<h3>DO YOU NEED A THEME?</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae<br/> metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</p>
					<div class="explain-button">
						<a href="#"><input type="button" value="PURCHASE" /></a>
					</div>
				</div>
			</div>
		</section>
		<div class="fixbox  wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="0.5s">
			<div class="retop" id="reTop" title="回到顶部">
				<a><i class="fa fa-arrow-circle-up"></i></a>
			</div>
			<div class="rehome" title="回到首页">
				<a href="index-Home.html"><i class="fa fa-bookmark-o"></i></a>
			</div>
		</div>
		<!--公共footer-->
		<footer class="Del-common-footer">
			<section class="footer-section wow fadeInUp animated" data-wow-duration="0.5s" data-wow-delay="0.2s">
				<div class="section-list clearfix">
					<aside class="item-group item-group-left">
						<div class="group-box">
							<div class="top-logo-img">
								<img src="img/logo2.png" />
							</div>
							<ul class="top-list clearfix">
								<li class="list-item list-rss">
									<a href=""><i class="fa fa-rss"></i></a>
								</li>
								<li class="list-item list-f">
									<a href=""><i class="fa fa-facebook-f"></i></a>
								</li>
								<li class="list-item list-twitter">
									<a href=""><i class="fa fa-twitter"></i></a>
								</li>
							</ul>
						</div>
						<p class="span-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida quam quis nunc rutrum placerat. Proin eu mi vitae neque veh interdum id nec turpis nam auctor faucibus sollicitudin.</p>
					</aside>
					<aside class="item-group item-group-center mg-l1">
						<dl>
							<dt>CONTACT INFO</dt>
							<dd>
								<a href="#">222 Ave C South</a>
							</dd>
							<dd>
								<a href="#">Saskatoon, Saskatchewan</a>
							</dd>
							<dd>
								<a href="#">Canada S7K 2N5</a>
							</dd>
							<dd class="Email">
								<a href="#">info@deliver.ca</a>
							</dd>
							<dd class="id-num">
								<a href="#">1.306.222.3456</a>
							</dd>
						</dl>
					</aside>
					<aside class="item-group item-group-center mg-l2">
						<dl class="center-dl-r">
							<dt>QUICK LINKS</dt>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Portfolio</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>About</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Archive</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Blog</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Bropdown</a>
							</dd>
							<dd>
								<a href="#"><i class="fa fa-chevron-right"></i>Contact Us</a>
							</dd>
						</dl>
					</aside>
					<aside class="item-group item-group-right">
						<dl>
							<dt>NEWSLETTER</dt>
							<dd><span>Lorem ipsum dolor sit amet dolor consectetur adipiscing elit. </span></dd>
							<dd><input class="Email" type="text" value="Email" />
								<a href="#"><input class="button" type="button" value="OK" /></a>
							</dd>
						</dl>
					</aside>
				</div>
				<div class="section-bottom clearfix">
					<p class="p-left">COPYRIGHT 2013 <span>DELIVER</span>. ALL RIGHTS RESERVED.</p>
					<p class="p-right">ABOUT / PRIVACY POLICY / CONTACT</p>
				</div>
			</section>
		</footer>
		<script src="js/core.js"></script>
		<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
		<script src="vendor/jquery.animsition.min.js"></script>
		<script>
			$(function() {
				Services.topp();
				common.close();
				common.search();
				common.bar();
			});
			var wow = new WOW({
					boxClass: 'wow',
					animateClass: 'animated',
					offset: 0,
					mobile: true,
					live: true
				});

				if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
					new WOW().init();
				}
			$(".animsition").animsition({

				inClass: 'fade-in',
				outClass: 'fade-out',
				inDuration: 1200,
				outDuration: 500,
				linkElement: '.animsition-link',
				// e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
				loading: true,
				loadingParentElement: 'body', //animsition wrapper element
				loadingClass: 'animsition-loading',
				unSupportCss: ['animation-duration',
					'-webkit-animation-duration',
					'-o-animation-duration'
				],
				//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
				//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

				overlay: false,

				overlayClass: 'animsition-overlay-slide',
				overlayParentElement: 'body'
			});
		</script>
	</body>

</html>